<!-- 团队信息底部固定栏 -->
<template>
  <div class="container">
    <div class="title">
      {{ teamName }}({{ teamMemberList.length }})
    </div>
    <div class="main">
      <div class="member-list">
        <div
          v-for="(item,index) in teamMemberLimit"
          :key="index"
          class="member"
        >
          <div
            class="avatar"
            :class="getAvatarClass(index)"
          >
            <image
              class="img"
              :src="teamMemberList[index]?.avatar ?? IMG_URL.PLUS_RED"
              mode="aspectFill"
            />
          </div>
          <!-- <div
            v-if="teamMemberList[index]"
            class="nickname"
          >
            {{ teamMemberList[index]?.nickname }}
          </div> -->
          <div
            v-if="teamMemberList[index]"
            class="score"
          >
            {{ teamMemberList[index]?.score || 0 }}积分
          </div>
          <div
            v-if="!teamMemberList[index]"
            class="invite-text"
          >
            邀请好友
          </div>
          <button
            v-if="!teamMemberList[index]"
            class="hidden-btn"
            open-type="share"
          />
        </div>
      </div>
      <button
        class="invite-btn"
        open-type="share"
      >
        邀请好友进团队
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IMG_URL } from '@/static/constant/202310-activity-constant';

type Props = {
  /** 队伍人数上限 */
  teamMemberLimit: number;
  teamName: string;
  teamMemberList: {
    avatar: string;
    nickname: string;
    score: number;
  }[];
}

const props = withDefaults(defineProps<Props>(), {
  teamMemberLimit: 8,
  teamName: '',
  teamMemberList: () => [],
});

/** 返回头像类名
 * @param index
 */
const getAvatarClass = (index: number) => {
  let className = '';
  if (index === 0) {
    // 队长
    className += 'captain';
  }

  if (!props.teamMemberList[index]) {
    // 空位
    className += ' add';
  }

  return className;
};
</script>

<style scoped lang="scss">
.container{
  position: fixed;
  bottom: 0;

  width: 100vw;
  height: 49.0667vw;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .title{
    width: 137px;

    background: $button-bg;
    border-radius: 25px 25px 0 0;

    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    color: #fff;
  }

  .main{
    width: 100vw;

    background: #fff;
    border-top: 4px solid #dde1ff;

    padding: 12px 0 calc(env(safe-area-inset-bottom) + 25px);
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    place-items: center;

    .member-list{
      width: 100%;

      display: flex;
      align-items: start;
      justify-content: space-around;

      .member{
        position: relative;

        display: flex;
        flex-direction: column;
        grid-row: 1;
        row-gap: 2px;
        align-items: center;

        .avatar{
          width: 40px;
          height: 40px;

          .img{
            width: 100%;
            height: 100%;

            border: 2px solid #5769FF;
            border-radius: 50%;
          }

          &.add{
            .img{
              border: 2px dashed #ff2459;
            }
          }

          &.captain{
            position: relative;

            &::after{
              position: absolute;
              top: 0;
              right: -10px;

              width: 20px;
              height: 10px;

              content: '团长';

              background: #ff2459;
              border: 0.5px solid #fff;
              border-radius: 58px;

              display: flex;
              align-items: center;
              justify-content: center;

              font-size: 6px;
              color: #fff;

            }
          }
        }

        .nickname{
          font-size: 15px;
          color: #333;
        }

        .score{
          font-size: 15px;
          color: #FF2459;
        }

        .invite-text{
          margin-top: 12px;

          font-size: 15px;
          color: #ff2459;
        }

        .hidden-btn{
          position: absolute;
          top: 0;
          left: 0;

          width: 100%;
          height: 100%;

          opacity: 0;
        }
      }
    }

    .invite-btn{
      width: 224px;
      height: 36px;

      background: $button-bg;
      border-radius: 41px;

      display: flex;
      grid-row: 2;
      column-span: all;
      align-items: center;
      justify-content: center;

      font-size: 15px;
      color: #fff;
    }

  }
}
</style>
